<template>
  <view class="index">
	 <UgoSearch></UgoSearch>
	  
	  <!-- 轮播图 -->
	  <u-swiper 
	  :list="swiperList"
	  name="image_src"
	  height="340"
	  ></u-swiper>

	  <!-- 导航栏 -->
	  <view class="nav u-flex">
		  <navigator v-for="item in navList" :key="item.name" class="u-flex-1 u-p-25">
			  <u-image width="100%" mode="widthFix" :src="item.image_src"></u-image>
		  </navigator>
	  </view>

	  <!-- 楼层 -->
	 <view class="floor">
		 <view class="floor-group" v-for="itemOne in floorList" :key="itemOne.floor_title.name">
			 <view class="floor-title">
				 <u-image width="100%" mode="widthFix" :src="itemOne.floor_title.image_src"></u-image>
			 </view>
			 <view class="floor-list">
             <navigator v-for="itemTwo in itemOne.product_list" :key="itemTwo.name">
				 <u-image width="100%" height="100%" mode="scaleToFill" :src="itemTwo.image_src"></u-image>
			 </navigator>
			 </view>
		 </view>
	 </view>
  </view>
</template>

<script>
export default {
    data(){
    return{
      swiperList:[],
      navList:[],
	  floorList:[]
    }
  },
  onLoad(){
	  //调用轮播图函数
    this.getSwiper()
	//调用导航栏函数
	this.getNav()
	//调用楼层函数
	this.getFloor()
  } ,
  methods:{
	  //获取轮播图函数
    async getSwiper(){
	this.swiperList= await this.$u.http.get('/home/swiperdata')
    },
      //获取导航栏函数
	async getNav(){
	this.navList= await this.$u.http.get('/home/catitems')
    },
	//获取楼层数据
	async getFloor(){
	this.floorList= await this.$u.http.get('/home/floordata')
	}
  }
}
</script>

<style lang="scss">
.floor-group{
	margin-top: 10rpx;
}
.floor-list{
	padding: 0 12rpx;
	overflow: hidden;
	navigator{
		float:left
	}
	// 第一张
	navigator:nth-child(1){
		width: 232rpx;
		height: 386rpx;
	}
	// 后四张
	navigator:nth-last-child(-n + 4) {
    width: 233rpx;
    height: 188rpx;
  }
  /* 2 和 4 图片 */
  navigator:nth-child(2),
  navigator:nth-child(4) {
    margin: 0 15rpx;
  }

  /* 后两张图片 */
  navigator:nth-last-child(-n + 2) {
    margin-top: 10rpx;
  }
}
</style>